<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Layout</title>
    <link rel="stylesheet" href="styles.css">  
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>
    <div class="content">
        <div class="item">
            <div class="sub-item">Sub Item 1</div>
            <div class="sub-item">Sub Item 2</div>
            <div class="sub-item">Sub Item 3</div>
            <div class="sub-item">Sub Item 4</div>
        </div>
        <!-- Repeat .item divs as needed -->
        <div class="item">
            <div class="sub-item">Sub Item 5</div>
            <div class="sub-item">Sub Item 6</div>
            <div class="sub-item">Sub Item 7</div>
            <div class="sub-item">Sub Item 8</div>
        </div>
        <div class="item">
            <div class="sub-item">Sub Item 9</div>
            <div class="sub-item">Sub Item 10</div>
            <div class="sub-item">Sub Item 11</div>
            <div class="sub-item">Sub Item 12</div>
        </div>
        <div class="item">
            <div class="sub-item">Sub Item 13</div>
            <div class="sub-item">Sub Item 14</div>
            <div class="sub-item">Sub Item 15</div>
            <div class="sub-item">Sub Item 16</div>
        </div>
        <!-- More .item divs can be added here -->
    </div>
    <footer>
        <p>Footer</p>
    </footer>
</body>

</html>